
<html>
<head>
<link href='http://i1263.photobucket.com/albums/ii623/dek_rif/Blog/th_animated_favicon1.gif?t=1336135599' rel='icon' type='image/x-icon'/>  
    
<title>CSS3 Slide Style Navigation Bar</title>
<style type="text/css">
body { font-family: Verdana, Arial;margin: 0;padding: 0;text-align: center;font-size:small;}
#outer-wrapper {font-family: Verdana, Arial;}
#content-wrapper { width: 95%;  margin: 0 auto;  padding: 1%;  text-align: center;}
#content-wrapper h2 {font-size:20px;margin: 5px 0 1em ;padding: 3px 10px;background-color: #F8ECE0;font-size:16px;color:#333333;border:1px solid #999;}
<style>
OW {
        max-width: 900px !important;
            margin: 100px auto;
            margin-top: 20px;
        }
        OW ul {
            list-style: none;
            overflow: hidden;
        }
        OW li a {
            background: #000;
            border-right: 1px solid #fff;
            color: #fff;
            display: block;
            float: left;
            font: 400 13px 'Montserrat Alternates', Arial;
            padding: 10px;
            text-align: center;
            text-decoration: none;
            text-transform: uppercase;
            width: 80px;
            -webkit-transition: transform 1s;
            -moz-transition: transform 1s;
        }

        OW#nojquery li a:hover, .rotate {
            -moz-animation: animrotate 2s; 
            -webkit-animation: animrotate 2s; 
            background: #222;
        }
        @-moz-keyframes animrotate {
            100% {background: blue;-moz-transform: perspective( 200px ) rotateY( 360deg );}
        }

        @-webkit-keyframes animrotate {
            100% {background: blue;-webkit-transform: perspective( 200px ) rotateY( 360deg );}
 }

</style> 
    
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>    
</head>
<body>
<div id="content-wrapper">
       <h2>CSS3 Slide Style Navigation Bar</h2>
<OW id="nojquery">

   <ul>
     <li><a href="http://otowebsite.blogspot.com/">Home</a></li>
     <li><a href="http://otowebsite.blogspot.com/2013/03/css3-slide-style-navigation-bar.html">About</a></li>
     <li><a href="#">Portfolio</a></li>
     <li><a href="#">Services</a></li>
     <li><a href="#">Blog</a></li>
     <li><a href="#">Contact</a></li>
   </ul>
</OW> 
<center><div style="position:absolute;bottom:0px;left:30%;right:30%">
  <b><span style="font-size: x-large;"><a href="http://otowebsite.blogspot.com/2013/03/css3-slide-style-navigation-bar.html" target="_blank"><blink>Back To Tutorial</blink></a></span></b></div></center>
    
    
<script>
var options={ "publisher": "d4be5209-8eb5-4854-8391-917faf746b47", "position": "right", "ad": { "visible": false, "openDelay": 5, "closeDelay": 0}, "chicklets": { "items": ["facebook", "twitter", "googleplus", "linkedin", "pinterest", "sharethis"]}};
var st_hover_widget = new sharethis.widgets.hoverbuttons(options);
</script>    
</body>
</html>